<template>
	<view class="page">

		<shouruliu ref="shouruliu"></shouruliu>
		<view class="tip" style="margin-top: 68rpx;">
			<text style="color: red; margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">驾驶证正副本照片</text>，否则会影响您的评估结果。</text>
		</view>
		<view class="" style="display: flex;">
			<zhengben ref="zhengben" />
			<fuben ref="fuben" />
			<view class="shilitu" @click="showImg(jiashizheng)" style="margin-top: 31rpx;">
				示例图
			</view>
		</view>
		<!-- 		<view class="tip" style="margin-top: 68rpx;">
			<text
				style="color: red; margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text style="color: red;">身份证正反面照片</text>，否则会影响您的评估结果。</text>
		</view>
		<view class="" style="display: flex;">
			<shengfenzhengzhengmian ref="shengfenzhengzhengmian"/>
			<shengfenzhengfanmian ref="shengfenzhengfanmian"/>
		</view> -->
		<view class="tip" style="margin-top: 68rpx;">
			<text style="color: red; margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">工行、农行、交通、邮政的银行储蓄卡正反面</text>，否则会影响您的评估结果。</text>
		</view>
		<view class="" style="display: flex;">
			<yinhangzhengmian ref="yinhangzhengmian" />
			<yinhangfanmian ref="yinhangfanmian" />
			<view class="shilitu" @click="showImg(yiHuangData)" style="margin-top: 31rpx;">
				示例图
			</view>
		</view>
		<qita ref="qita"></qita>

		<view class="items" @click="maritalStatusShow = true">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>婚姻状况</text>
			</view>
			<u-picker :show="maritalStatusShow" :columns="maritalStatusColumns" @confirm="maritalStatusConfirm"
				@cancel="maritalStatusCancel"></u-picker>
			<view class="items_rght_tips">
				{{maritalStatusTips || '请选择婚姻状况'}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>从业开始年份</text>
			</view>
			<u--input placeholder="请输入从业开始年份" border="surround" v-model="form.startYear" inputAlign="right"
				@input="yearInput"></u--input>
		</view>
		<view class="items" @click="titlesShow = true">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>职称</text>
			</view>
			<u-picker :show="titlesShow" :columns="titlesColumns" @confirm="titlesConfirm"
				@cancel="titlesCancel"></u-picker>
			<view class="items_rght_tips">
				{{titlesTips || '请选择职称'}}
			</view>
		</view>
		<view class="items" @click="careerShow = true">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>职业</text>
			</view>
			<u-picker :show="careerShow" :columns="careerColumns" @confirm="careerConfirm"
				@cancel="careerCancel"></u-picker>
			<view class="items_rght_tips">
				{{careerTips || '请选择职业'}}
			</view>
		</view>
		<view class="items" @click="unitRankShow = true">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>单位职级</text>
			</view>
			<u-picker :show="unitRankShow" :columns="unitRankColumns" @confirm="unitRankConfirm"
				@cancel="unitRankCancel"></u-picker>
			<view class="items_rght_tips">
				{{unitRankTips || '请选择单位职级'}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>个人年收入(万元)</text>
			</view>
			<u--input placeholder="请输入个人年收入" border="surround" v-model="form.personalIncome" inputAlign="right"
				@input="personalInput"></u--input>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>家庭年收入(万元)</text>
			</view>
			<u--input placeholder="请输入家庭年收入" border="surround" v-model="form.householdIncome" inputAlign="right"
				@input="householdInput"></u--input>
		</view>
		<view style="width: 100%;text-align: center;font-size: 28rpx;"><text>紧急联系人1</text></view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>姓名</text>
			</view>
			<u--input placeholder="请输入姓名" border="surround" v-model="form.firstName" inputAlign="right"></u--input>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>手机号码</text>
			</view>
			<u--input placeholder="请输入手机号码" border="surround" v-model="form.firstPhone" inputAlign="right"
				@input="firstPhoneInput"></u--input>
		</view>
		<view class="items" @click="firstRelationshipShow = true">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>关系</text>
			</view>
			<u-picker :show="firstRelationshipShow" :columns="relationshipColumns" @confirm="firstRelationshipConfirm"
				@cancel="relationshipCancel"></u-picker>
			<view class="items_rght_tips">
				{{firstRelationshipTips || '请选择关系'}}
			</view>
		</view>
		<view style="width: 100%;text-align: center;font-size: 28rpx;"><text>紧急联系人2</text></view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>姓名</text>
			</view>
			<u--input placeholder="请输入姓名" border="surround" v-model="form.secondName" inputAlign="right"></u--input>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>手机号码</text>
			</view>
			<u--input placeholder="请输入手机号码" border="surround" v-model="form.secondPhone" inputAlign="right"
				@input="secondPhoneInput"></u--input>
		</view>
		<view class="items" @click="secondRelationshipShow = true">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>关系</text>
			</view>
			<u-picker :show="secondRelationshipShow" :columns="relationshipColumns" @confirm="secondRelationshipConfirm"
				@cancel="relationshipCancel"></u-picker>
			<view class="items_rght_tips">
				{{secondRelationshipTips || '请选择关系'}}
			</view>
		</view>
		<view class="but">
			<u-button
				:customStyle="{border:'none',background: '#0079FE',width:'686rpx',color:'#fff',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx'}"
				@click="submit">提交
			</u-button>
		</view>
	</view>
</template>

<script>
	import shouruliu from "./uploadFile/shou_ru_liu_flie.vue";
	import zhengben from "./uploadFile/jia_shi_zheng_zheng_ben.vue";
	import fuben from "./uploadFile/jia_shi_zheng_fu_ben.vue";
	import qita from "./uploadFile/qitaflie.vue";
	// import shengfenzhengzhengmian from "./uploadFile/sheng_fen_zheng_zheng_mian.vue";
	// import shengfenzhengfanmian from "./uploadFile/sheng_fen_zheng_fan_mian.vue";
	import yinhangzhengmian from "./uploadFile/xing_hang_zheng_mian.vue";
	import yinhangfanmian from "./uploadFile/xing_hang_fan_mian.vue";


	export default {
		components: {
			shouruliu,
			zhengben,
			fuben,
			qita,
			// shengfenzhengzhengmian,
			// shengfenzhengfanmian,
			yinhangzhengmian,
			yinhangfanmian,
		},
		data() {
			return {
				type: null,
				reg: /^\d+$/,
				workflowWater: [],
				otherImg: [],
				form: {
					id: null,
					workflowWater: '', //工作流水图片
					drivingLicense: '', //驾驶证图片
					drivingLicenseBack: '',
					otherImg: '', //其他
					bankCardImg: '', //银行卡正面照
					bankCardBackImg: '', //银行卡反面照
					maritalStatus: null, //婚姻状态
					startYear: '', //从业开始年份
					titles: null, //职称
					career: null, //职业
					unitRank: null, //单位职级
					personalIncome: '', //个人年收入
					householdIncome: '', //家庭年收入
					firstName: '', //联系人1姓名
					firstPhone: '', //联系人1电话
					firstRelationship: null, //联系人1关系
					secondName: '', //联系人2姓名
					secondPhone: '', //联系人2电话
					secondRelationship: null, //联系人2关系
					type: null, //判断是否客户操作（0.是 1.否）
				},
				yiHuangData:['https://admintestapi.wemo.group//dev/file/download?id=1665965332660105217'],//银行示例图
				jiashizheng:['https://admintestapi.wemo.group//dev/file/download?id=1665970080473821186','https://admintestapi.wemo.group//dev/file/download?id=1665970272946237441'],//驾驶证
				// 婚姻状况数据源
				maritalStatusColumns: [
					['已婚有子', '已婚无子', '未婚', '离异', '丧偶']
				],
				maritalStatusTips: '', //婚姻状况提示信息
				maritalStatusShow: false, //婚姻状况开关
				// 职称数据源
				titlesColumns: [
					['无', '初', '中', '高']
				],
				titlesTips: '', //职称提示信息
				titlesShow: false, //职称开关
				// 职业数据源
				careerColumns: [
					['国家机关、党群组织、企业、事业单位负责人', '专业技术人员', '办事人员和有关人员', '商业、服务业人人员', '农、林、牧、渔、水利业生产人员',
						'生产、运输设备操作人员及有关人员', '军人', '不便分类的其他从业人员'
					]
				],
				careerTips: '', //职称提示信息
				careerShow: false, //职称开关
				// 单位职级数据源
				unitRankColumns: [
					['高级领导', '中级领导', '一般员工', '其他']
				],
				unitRankTips: '', //单位职级提示信息
				unitRankShow: false, //单位职级开关
				// 紧急联系人关系数据源
				relationshipColumns: [
					['父母', '配偶', '子女', '其他亲属']
				],
				firstRelationshipTips: '', //紧急联系人1关系提示信息
				firstRelationshipShow: false, //紧急联系人1关系开关
				secondRelationshipTips: '', //紧急联系人2关系提示信息
				secondRelationshipShow: false, //紧急联系人2关系开关
				buChongZiLiaoDataShow:{
					workflowWater:[],
					otherImg:[]
				}

			}
		},
		created() {},
		onLoad(options) {
			this.form.id = options.id
			this.type = options.type
			let applyStatus = options.applyStatus
			if (applyStatus == '12') {
				this.showFile()
			}
		},
		methods: {
			// 示例图预览
			showImg(path) {
				console.log(path);
				uni.previewImage({
					urls:[...path]
				})
			},
			//从业年份限定
			yearInput(value) {
				this.$nextTick(function() {
					if (!this.reg.test(value)) {
						this.form.startYear = value.replace(/\D/g, '')
						this.$ToastFail('只能输入数字')
					}
				})
			},
			//个人年收入限定
			personalInput(value) {
				this.$nextTick(function() {
					if (!this.reg.test(value)) {
						this.form.personalIncome = value.replace(/\D/g, '')
						this.$ToastFail('只能输入数字')
					}
				})
			},
			//家庭年收入限定
			householdInput(value) {
				this.$nextTick(function() {
					if (!this.reg.test(value)) {
						this.form.householdIncome = value.replace(/\D/g, '')
						this.$ToastFail('只能输入数字')
					}
				})
			},
			//联系人1手机号码限定
			firstPhoneInput(value) {
				this.$nextTick(function() {
					if (value.length>11) {
						this.form.firstPhone = value.slice(0, 11);
						this.$ToastFail('只能输入11位数字')
					}
					if (!this.reg.test(value)) {
						this.form.firstPhone = value.replace(/\D/g, '')
						this.$ToastFail('只能输入11位数字')
					}
				})
			},
			//联系人2手机号码限定
			secondPhoneInput(value) {
				this.$nextTick(function() {
					if (value.length>11) {
						this.form.secondPhone = value.slice(0, 11);
						this.$ToastFail('只能输入11位数字')
					}
					if (!this.reg.test(value)) {
						this.form.secondPhone = value.replace(/\D/g, '')
						this.$ToastFail('只能输入11位数字')
					}
				})
			},
			// 婚姻状况弹框确认按钮
			maritalStatusConfirm(e) {
				this.form.maritalStatus = e.indexs[0]
				this.maritalStatusTips = e.value[0]
				this.maritalStatusShow = false
			},
			// 婚姻状况弹框取消按钮
			maritalStatusCancel() {
				this.maritalStatusShow = false
			},
			// 职称弹框确认按钮
			titlesConfirm(e) {
				this.form.titles = e.indexs[0]
				this.titlesTips = e.value[0]
				this.titlesShow = false
			},
			// 职称弹框取消按钮
			titlesCancel() {
				this.titlesShow = false
			},
			// 职业弹框确认按钮
			careerConfirm(e) {
				this.form.career = e.indexs[0]
				this.careerTips = e.value[0]
				this.careerShow = false
			},
			// 职业弹框取消按钮
			careerCancel() {
				this.careerShow = false
			},
			// 单位职级弹框确认按钮
			unitRankConfirm(e) {
				this.form.unitRank = e.indexs[0]
				this.unitRankTips = e.value[0]
				this.unitRankShow = false
			},
			// 单位职级弹框取消按钮
			unitRankCancel() {
				this.unitRankShow = false
			},
			// 紧急联系人1关系弹框确认按钮
			firstRelationshipConfirm(e) {
				this.form.firstRelationship = e.indexs[0]
				this.firstRelationshipTips = e.value[0]
				this.firstRelationshipShow = false
			},
			// 紧急联系人2关系弹框确认按钮
			secondRelationshipConfirm(e) {
				this.form.secondRelationship = e.indexs[0]
				this.secondRelationshipTips = e.value[0]
				this.secondRelationshipShow = false
			},
			// 紧急联系人2关系弹框取消按钮
			relationshipCancel() {
				this.firstRelationshipShow = false
				this.secondRelationshipShow = false
			},
			// 提交
			submit() {
				if (this.$refs.shouruliu.ImageData.length <= 0) {
					this.$ToastFail('请先上传收入流水文件再提交')
					return
				}
				if (this.$refs.zhengben.fileList1.length <= 0) {
					this.$ToastFail('请先上传驾驶证正本再提交')
					return
				}
				if (this.$refs.fuben.fileList1.length <= 0) {
					this.$ToastFail('请先上传驾驶证副本再提交')
					return
				}
				if (this.$refs.yinhangzhengmian.fileList1.length <= 0) {
					this.$ToastFail('请先上传银行卡正面照再提交')
					return
				}
				if (this.$refs.yinhangfanmian.fileList1.length <= 0) {
					this.$ToastFail('请先上传银行卡反面照再提交')
					return
				}
				if (this.form.maritalStatus == null) {
					return this.$ToastFail('请选择婚姻状态')
				}
				if (this.form.startYear == '') {
					return this.$ToastFail('请输入从业开始年份')
				}
				if (this.form.titles == null) {
					return this.$ToastFail('请选择职称')
				}
				if (this.form.career == null) {
					return this.$ToastFail('请选择职业')
				}
				if (this.form.unitRank == null) {
					return this.$ToastFail('请选择单位职级')
				}
				if (this.form.personalIncome == '') {
					return this.$ToastFail('请输入个人年收入')
				}
				if (this.form.householdIncome == '') {
					return this.$ToastFail('请输入家庭年收入')
				}
				if (this.form.firstName == '') {
					return this.$ToastFail('请输入紧急联系人1姓名')
				}
				if (this.form.firstPhone == '') {
					return this.$ToastFail('请输入紧急联系人1电话')
				}
				if (this.form.firstRelationship == null) {
					return this.$ToastFail('请选择紧急联系人1关系')
				}
				if (this.form.secondName == '') {
					return this.$ToastFail('请输入紧急联系人2姓名')
				}
				if (this.form.secondPhone == '') {
					return this.$ToastFail('请输入紧急联系人2电话')
				}
				if (this.form.secondRelationship == null) {
					return this.$ToastFail('请选择紧急联系人2关系')
				}


				var arr1 = this.$refs.shouruliu.ImageData.map(d => {
					return d.path
				})
				var arr2 = this.$refs.zhengben.fileList1.map(d => {
					return d.url
				})
				var arr3 = this.$refs.fuben.fileList1.map(d => {
					return d.url
				})
				var arr4 = this.$refs.qita.ImageData.map(d => {
					return d.path
				})
				// var arr5 = this.$refs.shengfenzhengzhengmian.fileList1.map(d => {
				// 	return d.url
				// })
				// var arr6 = this.$refs.shengfenzhengfanmian.fileList1.map(d => {
				// 	return d.url
				// })
				var arr7 = this.$refs.yinhangzhengmian.fileList1.map(d => {
					return d.url
				})
				var arr8 = this.$refs.yinhangfanmian.fileList1.map(d => {
					return d.url
				})

				this.form.workflowWater = arr1.join(',')
				this.form.drivingLicense = arr2.join(',')
				this.form.drivingLicenseBack = arr3.join(',')
				this.form.otherImg = arr4.join(',')
				// this.form.idCardImg = arr5.join(',')
				// this.form.idCardBackImg = arr6.join(',')
				this.form.bankCardImg = arr7.join(',')
				this.form.bankCardBackImg = arr8.join(',')
				this.form.type=this.type
				this.buChongZiLiaoDataShow.workflowWater = this.$refs.shouruliu.ImageData
				this.buChongZiLiaoDataShow.otherImg = this.$refs.qita.ImageData
				this.form.buChongZiLiaoDataShow = `${JSON.stringify(this.buChongZiLiaoDataShow)}`
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '您确认要提交吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// showCancel: false,
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色，颜色最好是十六进制，不然程序发布上线会出问题
					confirmColor: '#ef111b',
					//取消字体的颜色
					cancelColor: '#000000',
					success: function(res) {
						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.submitApi()
						} else {
							// 执行取消后的操作
						}
					}.bind(this)
				})
			},
			async submitApi() {


				// 请求接口
				uni.showLoading({
					mask: true
				})
				const res = await this.$post(`/biz/wxInstallment/supplementMyInstallment`, this.form)
				if (res.statusCode == 200) {
					this.$ToastOk('提交成功')
					var role = uni.getStorageSync('roles')
					if (role && role.includes("银行客户经理")) {
						this.showBankOrderList = true
						this.isYinhangOrKehu = true
					}
					if (role && role.includes("customer")) {
						setTimeout(() => {
							uni.setStorageSync("id", '')
							uni.navigateTo({
								url: './wo_de_shen_qing'
							})
						}, 1000)
					} else {
						setTimeout(() => {
							var pages = getCurrentPages()
							var prevPage = pages[pages.length - 2]
							prevPage.$vm.$refs.detail.getInstallment()
							console.log(prevPage.$vm.$refs.detail.id, '1111111');
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}

				} else {
					this.$ToastFail("提交失败,请重试")
				}
			},
			// 数据回显
			async showFile() {
				const res = await this.$post(`/biz/wxInstallment/getInstallmentInfo`, {
					id: this.form.id
				})
				if (res.statusCode == 200) {
					//工作流水
					if (res.data.data.workflowWater != null) {
						let workflowWater = res.data.data.workflowWater.split(',')
						this.$refs.shouruliu.fileList1 = workflowWater.map(d => {
							return {
								url: d
							}
						})
					}
					//其它
					if (res.data.data.otherImg != null) {
						let qita = res.data.data.otherImg.split(',')
						this.$refs.qita.fileList1 = qita.map(d => {
							return {
								url: d
							}
						})
					}
					//驾驶证正面
					if (res.data.data.drivingLicense != null) {
						let drivingLicense = res.data.data.drivingLicense.split(',')
						this.$refs.zhengben.fileList1 = drivingLicense.map(d => {
							return {
								url: d
							}
						})
					}
					//驾驶证反面
					if (res.data.data.drivingLicenseBack != null) {
						let drivingLicenseBack = res.data.data.drivingLicenseBack.split(',')
						this.$refs.fuben.fileList1 = drivingLicenseBack.map(d => {
							return {
								url: d
							}
						})
					}
					//银行卡正面
					if (res.data.data.bankCardImg != null) {
						let bankCardImg = res.data.data.bankCardImg.split(',')
						this.$refs.yinhangzhengmian.fileList1 = bankCardImg.map(d => {
							return {
								url: d
							}
						})
					}
					//银行卡反面
					if (res.data.data.bankCardBackImg != null) {
						let bankCardBackImg = res.data.data.bankCardBackImg.split(',')
						this.$refs.yinhangfanmian.fileList1 = bankCardBackImg.map(d => {
							return {
								url: d
							}
						})
					}
					this.form = res.data.data
					this.maritalStatusTips = this.maritalStatusColumns[0][res.data.data.maritalStatus]
					this.titlesTips = this.titlesColumns[0][res.data.data.titles]
					this.careerTips = this.careerColumns[0][res.data.data.career]
					this.unitRankTips = this.unitRankColumns[0][res.data.data.unitRank]
					this.firstRelationshipTips = this.relationshipColumns[0][res.data.data.firstRelationship]
					this.secondRelationshipTips = this.relationshipColumns[0][res.data.data.secondRelationship]
					this.$refs.shouruliu.ImageData = JSON.parse(res.data.data.buChongZiLiaoDataShow).workflowWater
					this.$refs.qita.ImageData = JSON.parse(res.data.data.buChongZiLiaoDataShow).otherImg
				}
			}
		}
	}
</script>

<style>
	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.bi_tian {
		display: inline-block;
		color: red;
		margin: 10rpx 10rpx 0 0;
	}

	.items_left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.items_rght_tips {
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.page {
		overflow-y: hidden;
		width: 100%;
		/* height: 100vh; */
		background-color: #fff;
		padding: 0 30rpx 102rpx;
		box-sizing: border-box;
	}

	.tip {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin-top: 24rpx;
	}

	.uploaad {
		width: 690rpx;
		/* height: 297rpx; */
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 32rpx;
	}

	.uploaad {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.icon {
		font-size: 108rpx;
		font-family: 'Rubik-Regular, Rubik';
		font-weight: 400;
		color: #C4C4C4;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.fenGe {
		width: 690rpx;
		height: 15rpx;
		background: #F4F4FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tishi {
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
	}

	.xie_yi {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin: 34rpx 0 76rpx;
	}

	.items_rght_tips {
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.but {
		/* position: fixed; */
		/* bottom: 196rpx; */
		margin-top: 30rpx;
	}

	.newuploaad {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 32rpx;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}
	.shilitu {
		text-align: center;
		line-height: 145rpx;
		width: 145rpx;
		height: 145rpx;
		font-size: 24rpx;
		background-color: #f4f5f7;
	}
</style>